<template>
  <div style="width: 100%;;height: 100%;" class="air-conditionner">
    <div class="flex air-conditionner-box" style="flex-wrap: wrap;width: 100%;height: 100%;">
      <div class="list-box" v-for="(item, index) in lists" :key="index" style="flex-wrap: wrap;">
        <div class="list-box-1">
          <div class="flex list-box-1-1">
            <div style="width:30%;height:100%;margin-top:1%">
              <img :src="item.imgUrl" style="width: 100%;height: 50%;" />
            </div>
            <div class="list-box-1-1-1">
              <div class="list-box-1-1-1-1">{{ item.name }}</div>
              <div class="list-box-1-1-1-2">编码：{{ item.number }}</div>
              <div class="list-box-1-1-1-2">温度：{{ item.temperature }}</div>
              <div class="list-box-1-1-1-2">模式：{{ item.mode }}</div>
              <div class="list-box-1-1-1-2">风速：{{ item.wspeed }}</div>
            </div>
          </div>
          <div class="flex list-box-1-2">
            <div class="fle list-box-1-2-1">
              <span :class="[item.online ? 'online-0' : 'online-1']" class="online-radius" /><span
                :style="{ color: item.online ? '#40E361' : '#F44343' }" style="margin-left:5px">{{ item.online ? "在线" :
                  "离线" }}</span>
            </div>
            <div class="flex">
              <el-switch v-model="item.online" active-color="#2A7BFF" inactive-color="#848C98">
              </el-switch>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.index"
        :page-sizes="[12, 20, 50, 100]" :page-size="pages.size" layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import GridManageApi from "@/api/grid-manage";
import { lig } from './data.ts'
export default {
  data() {
    return {
      lists: [],
      pages: {
        total: 0,
        size: 12,
        index: 1
      }
    };
  },
  mounted() {
    this.lists = lig
    this.pages.total = this.lists.length
  },
  methods: {
    toReset() {
      this.searchModel = {};
      this.$refs.elTable.clearSort();
      this.$refs.elTable.clearFilter();
      this.toSearch();
    },
    change1(item, index) {
      console.log(' this.lists[index].isOpen ', this.lists[index].online)
    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    }
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;

}

.air-conditionner {
  position: relative;
  width: 100%;
  height: 100%;

}

.air-conditionner-box {
  flex-wrap: wrap;
  width: 100%;
  height: 95%;
  align-content: flex-start;
  overflow-y: scroll;
  padding-bottom: 4%;
}

.air-conditionner-box::-webkit-scrollbar {
  display: none;
}

.list-box {
  opacity: 1;
  background: #ffffff;
  opacity: 1;
  font-family: Source Han Sans CN;
  font-weight: 500;
  letter-spacing: 0em;
  padding: 8px;
  color: #272C33;
  width: 25%;
  height: 33%;
}

.list-box-1 {
  border-radius: 2px;
  box-sizing: border-box;
  border: 1px solid #DAE1E8;
  box-shadow: 2px 0 10px 2px #ebebeb;
  width: 100%;
  height: 100%;

}

.list-box-1-1 {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid #DAE1E8;
  width: 100%;
  height: 80%;
}

.list-box-1-2 {
  width: 100%;
  height: 20%;
  justify-content: space-between;
  padding: 5%;
}

.list-box-1-2-1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-box-1-1-1 {
  width: 65%;
  height: 100%;
  font-family: Source Han Sans CN;
  font-weight: normal;
  letter-spacing: 0em;
}

.list-box-1-1-1-1 {
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  margin-top: 8%;
  margin-left: 15%;
}

.list-box-1-1-1-2 {
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  margin-top: 8%;
  margin-left: 15%;

}


.online-radius {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.online-0 {
  background: #40E361;
}

.online-1 {
  background: #F44343;
}

.pagination {
  position: absolute;
  width: 100%;
  text-align: right;
  padding-top: vh(5);
  padding-bottom: vh(5);
  background: #ffffff;
  bottom: 0;
  padding-bottom: 12px;
}
</style>
<style>
@media (max-width: 1680) and (min-width: 1280px) {

  .list-box-1-1-1>>>div {
    font-size: 10px !important;
  }
}

@media (max-width: 3000) and (min-width: 2000px) {
  list-box-1-1-1>>>div {
    font-size: 80px !important;
    background: #000000;
  }
}
</style>